<template>
  <el-dialog
    :visible="show"
    :append-to-body="true"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="480px"
    :title="`${type === 'add' ? '新建' : '编辑'}动态表单模版字段`"
  >
    <el-form :model="form" :rules="rules" label-position="top" ref="formRef">
      <el-form-item prop="field">
        <template #label>
          选择字段
          <span v-if="type === 'add'" class="tip"
            >字段需要先在<span class="link" @click="toPage">【全局字段】</span>页面进行编辑后才可选择</span
          >
        </template>
        <el-select
          v-model="form.field"
          filterable
          clearable
          collapse-tags
          collapse-tags-tooltip
          style="width: 100%"
          :disabled="type === 'edit'"
          placeholder="请选择要添加的字段"
        >
          <el-option :label="item.label" :value="item.value" :key="index" v-for="(item, index) in getGlobalFields">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否必填" prop="required">
        <el-radio :label="true" v-model="form.required">是</el-radio>
        <el-radio :label="false" v-model="form.required">否</el-radio>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-radio :label="1" v-model="form.status">启用</el-radio>
        <el-radio :label="0" v-model="form.status">停用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button link @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
const defaultForm = {
  field: '',
  required: false,
  status: 1
}
export default {
  name: 'editTemp',
  data() {
    return {
      show: false,
      form: defaultForm,
      rules: {
        field: [{ required: true, message: '请选择要添加的字段', trigger: 'change' }],
        required: [{ required: true, message: '请选择是否必填', trigger: 'change' }],
        status: [{ required: true, message: '请选择当前状态', trigger: 'change' }]
      },
      type: 'add'
    }
  },
  props: {
    globalFields: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    tempListObj() {
      // 已选择的模版字段
      const obj = {} // 存储
      if (this.tableData && this.tableData.length) {
        this.tableData.forEach((item) => {
          obj[item.field] = item
        })
      }
      return obj
    },
    getGlobalFields() {
      const glo_arr = []
      if (this.globalFields && this.globalFields.length) {
        this.globalFields.forEach((item) => {
          if (item.status && !this.tempListObj[item.field] && this.type === 'add' && item.category === 'custom') {
            // 启用字段 && 模版列表中不存在的字段 && 全局字段中的自定义字段 && 新增
            glo_arr.push({
              label: item.name,
              value: item.field
            })
          } else if (this.type === 'edit') {
            // select回显需全量字段
            glo_arr.push({
              label: item.name,
              value: item.field
            })
          }
        })
      }
      return glo_arr
    }
  },
  methods: {
    openDialog(type, row) {
      this.type = type
      this.show = true
      this.form = { ...defaultForm, ...row }
      this.$nextTick(() => {
        this.$refs['formRef'].clearValidate()
      })
    },
    closeDialog() {
      this.show = false
    },
    toPage() {
      console.log('toPage')
      this.closeDialog()
      this.$router.push({path: '/index/newConfig/globalField'})
    },
    save() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.closeDialog()
          this.$emit('onSaveData', this.form, this.type)
          this.type = 'edit' // 处理关闭瞬间 选择字段 处变成field的情况
        }
      })
    }
  },
  beforeMount() {
    console.log('111')
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../assets/common.styl"
.link {
  color: #459AE9
}
.resize-table
  position static !important
  height auto !important
.edit-temp
  padding 24px 24px 84px
  height calc(100vh - 60px)
  box-sizing border-box
  position relative
  overflow auto
  .return
    .icon
      cursor pointer
      .MC_icon-fangxiang-zuo-xian
        color rgba(0, 0, 0, 0.6)
        font-size 18px
        position relative
        top 2px
    .line
      color #DCDCDC
      margin 0 8px
    .tip
      color rgba(0, 0, 0, 0.6)
  .title
    height 36px
    padding 0 20px
    line-height 36px
    box-sizing border-box
    background rgba(30, 99, 245, 0.1)
    border-radius 4px
    font-size 14px
    color rgba(0, 0, 0, 0.88)
    font-weight 500
    margin 16px 0
  .status-right
    display flex
    align-items center
    :deep(.el-form-item__label)
      margin-bottom 0
  .add-btn
    float right
    color $c-main
    cursor pointer
    margin-bottom 16px
  .btn
    color $c-main
    cursor pointer
    margin-right 16px
    &:last-child
      margin-right 0px
  .operate-btn
    background #fff
    z-index 3
    position fixed
    bottom 0
    left 240px
    right 0
    height 60px
    padding 12px 24px
    box-sizing border-box
    text-align right
    border-top 1px solid #f2f2f2
  .table
    .el-icon-plus
      color $c-main
      margin-right 10px
      &:last-child
        margin-right 0
</style>
